let PORT='113.108.228.26:38086';//测试IP
//let PORT='10.32.28.11:8080';//正式IP

let PREFIX='http://'+PORT+'/pzhz-rest/';//接口前缀

let line_style={color:'#424952', width: 2};
let text_style={fontSize:14,color:'#CBCCCD',fontWeight:'bold'};
let hide={show:false};

//图表初始化
let charts=[echart1,echart2,echart3,echart4,echart5_1,echart5_2,echart5_3].map(o=>echarts.init(o));

//人数+小人图
let peopleImg=(id,data)=>{
    let el=$('#'+id);
    let count=data[id]*10/(data.todayJoinCount+data.nowCount);
    el.find('b').text(data[id]);
    el.find('.img').remove();

    for(let i=0;i<~~count;i++){
        el.append(`<img class="img" src="img/people.png">`)
    }
    //非整补虚图
    if(count%1>0){
        el.append(`<img class="img half" src="img/people.png">`)
    }
};

//逗留长短的人
let stayPeople=(id,data)=>{
    $('#'+id).html(`${data[id].pid.substr(0,16) || '__'} / <span>${(data[id].duration/60).toFixed(1) || '__' }</span>`);
};

//jq跨域
jQuery.support.cors = true;
//请求
let ajax=(url,data,call,type)=>{
    let getajax=$.ajax({
        url:PREFIX+url,
        timeout:30000,
        //headers:{'Authorization':'Bearer '+localStorage.token},
        type:type || 'get',
        data:data,
        dataType:'json',
        complete(v,status){
            if(status=='timeout'){
                getajax.abort();
            }
            call(v.responseText?JSON.parse(v.responseText):v);
        }
    })
};

//窗口大小变化
let resize=()=>{
    $('.headimg').height($('.headimg').width());
    $('.table').height($('.log').height()-95-$('.people').height());
    $('.chart').each(function(){
        $(this).removeAttr('style').height($(this).height())
    });
    charts.map(o=>{o.resize()})
};

//获取展示数据
let getRecord=(id,call)=>{
    ajax('getTodayRecord'+id,{},v=>{
        setTimeout(()=>{
            getRecord(id,call)
        },60000);
        if(v.code==0 && v.data) call(v.data);
    });
};

let peakHours=v=>{
    let aa={symbolSize:0,symbol:'circle',type:'line',smooth:true};
    charts[0].setOption({
        textStyle:text_style,
        color:['#27ECB8','rgba(31,115,101,.8)','#61C3ED'],
        grid:{x:60, y:30, x2:25, y2:30},
        xAxis:{
            type: 'category',data:v.x,splitLine:hide,axisTick:hide,
            axisLine:{lineStyle:line_style},
            axisLabel:{textStyle:text_style}
        },
        yAxis:{
            type: 'value',splitLine:hide,axisTick:hide,
            axisLine:{lineStyle:line_style},
            axisLabel:{formatter:'{value}K',textStyle:text_style}
        },
        series: [
            {name:'in',data:v.into,...aa},
            {name:'out',data:v.out,...aa},
            {
                name:'high',data:v.high,...aa,
                markPoint:{
                    symbol:'circle',
                    symbolSize:10,
                    itemStyle:{color:'#fff'},
                    data: [{type: 'max', name: '最大值'}],
                    label:{
                        position:'top',
                        formatter(v){return `人数：${v.value*1000}`},
                        textStyle:{color:'#fff',fontFamily:'es',fontSize:20}
                    }
                }
            }
        ]
    });
};

let dayStay=v=>{
    charts[1].setOption({
        textStyle:text_style,
        grid:{x:60, y:30, x2:20, y2:30},
        color: ['rgba(34,90,156,.7)', '#27ECB8'],
        xAxis:{
            type: 'category',
            axisTick:hide,data:v.x,
            splitLine:hide,
            axisLine: {lineStyle:line_style},
            axisLabel: {formatter(v){return v+'h'},textStyle:text_style}
        },
        yAxis:{
            type: 'value',
            axisTick:hide,
            axisLine:{lineStyle:line_style},
            splitLine: {lineStyle:line_style},
            axisLabel: {formatter:'{value}%'}
        },
        series:[
            {name: 'yesterday',type:'bar',barGap: 0, barWidth:15,data:v.yesterday},
            {name: 'today', type: 'bar', barWidth:15, data:v.today}
        ]
    });
};

let serverStatus=v=>{
    charts[2].setOption({
        textStyle:text_style,
        grid:{x:60, y:20, x2:20, y2:30},
        color: ['#61C3ED'],
        xAxis: {
            type: 'category',
            boundaryGap: false, data:v.x,
            axisTick:hide,
            splitLine: {show:true, lineStyle:line_style},
            axisLine: {lineStyle:line_style},
            axisLabel:{textStyle:text_style}
        },
        yAxis: {
            type: 'value',
            splitLine:hide,
            axisTick:hide,
            axisLine: {lineStyle:line_style},
            axisLabel:hide
        },
        series:{
            markLine:{
                label:{position:'start', formatter:'{c}K'},
                symbol:'none', lineStyle:{...line_style,type:'dashed'},
                data:[{type:'max'}]
            },
            smooth: true, symbol:'circle',
            symbolSize:8, data:v.y, type: 'line',
            areaStyle: {
                color: {
                    type: 'linear', x:0, y: 1, x2: 0, y2: 0,
                    colorStops: [
                        {offset: 0, color: 'rgba(97,195,237,.1)'},
                        {offset: 1, color: '#61C3ED'}
                    ]
                }
            }
        }
    });
};

let entranceTraffic=v=>{
    charts[3].setOption({
        textStyle: text_style,
        grid: {x: 20, y: 20, x2: 20, y2: 10, containLabel: true},
        dataset: {source: v.arr},
        xAxis: {
            axisTick:hide,
            axisLine: {lineStyle: line_style},
            splitLine: {lineStyle: line_style},
            axisLabel: {formatter: '{value}K', textStyle: text_style}
        },
        yAxis: {
            type: 'category',
            splitLine:hide,
            axisTick:hide,
            axisLine: {lineStyle: line_style},
            axisLabel: {textStyle: text_style}
        },
        visualMap: {
            ...hide, min: v.max - .01, max: v.max + .01, dimension: 1,
            inRange: {color: ['#205189', '#208772']}
        },
        series: [{type: 'bar', barWidth: 20, encode: {x: 'amount', y: 'name'}}]
    });
};

//环形图
let pieChart=(mychart,title,data,color)=>{
    mychart.setOption({
        title : {
            text:title, subtext: data[0]+'人', x:'center', bottom:'5%',
            textStyle:{color:color?color[0]:'#61C3ED', fontSize:20},
            subtextStyle:{color:color?color[0]:'#61C3ED', fontSize:15}
        },
        color:color || ["#61C3ED",'#205189'],
        series: [{
            center: ['50%', '35%'],
            type:'pie', radius: ['58%', '70%'],
            avoidLabelOverlap: false,
            hoveranination:false,
            silent:true,
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    formatter(v) {
                        return v.dataIndex?'':v.percent.toFixed(1)+'%'
                    },
                    textStyle:{
                        fontSize: 22, color:'#fff',
                        fontFamily:'es', fontWeight:'bold'
                    }
                }
            },
            labelLine: {normal:hide},
            data:[{value:data[0]}, {value:(data[1]-data[0])||1}]
        }]
    })
};
